<!-- 首页九宫格 -->
<template>
	<div class="container">

		<!-- 报表文件目录 -->
		<div style="" class="excelBox">
			<TreeFolder :iconName="iconNameChildren" :isShow="isShowChildren" :tree-data="treeData"
				:current="curNameKey" :typeTital="typeTital" @tree-node-click="nodeClick"
				@titleNodeClickChange="titleNodeClickChange" />
		</div>

		<!-- 报表下载列表数据 -->
		<div class="excel" style="width: 100%; padding-bottom: 50px">
			<div>
				<div class="excelItem" v-for="item in excelListData" :key="item.FileName">
					<div class="excelTitle" style="font-size: 15px">
						<span>文件名称:</span>
						<span> {{ item.FileName }}</span>
					</div>
					<div class="excelListItem">
						<span>文件类型:</span>
						<span> {{ item.FileType }}</span>
					</div>
					<div class="excelListItem">
						<span>文件大小:</span>
						<span>{{ item.FileSize }}</span>
					</div>
					<div class="excelListItem">
						<span>创建时间:</span>
						<span>{{ item.FileCreateTime }}</span>
					</div>
					<div class="excelListItem">
						<span>最后修改时间:</span>
						<span>{{ item.FileLastWriteTime }}</span>
					</div>
					<div class="login-btn">
						<button round type="primary" @click="submitDownButton(item)" :loading="loading">下载</button>
					</div>
				</div>
				<u-line></u-line>
			</div>
			<!--没有更多了 -->
			<!-- 	<div style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="excelListData"></LoadingMore>
			</div> -->
		</div>

		<div id="downloadIframe"></div>
	</div>
</template>

<script>
	const treeData = [{
			id: 1,
			name: "一级1"
		},
		{
			id: 2,
			name: "一级2",
			children: [{
					id: 3,
					name: "二级2-1"
				},
				{
					id: 4,
					name: "二级2-2"
				},
			],
		},
		{
			id: 5,
			name: "一级3",
			children: [{
					id: 6,
					name: "二级3-1",
					children: [{
							id: 7,
							name: "三级3-1-1"
						},
						{
							id: 8,
							name: "三级3-1-2"
						},
					],
				},
				{
					id: 9,
					name: "二级3-2"
				},
				{
					id: 10,
					name: "二级3-3"
				},
			],
		},
	];
	import {
		mapState
	} from "vuex";
	// 引入公共头部组件
	import TreeFolder from "./treeFolder.vue";
	import {
		GetReportFileDirectoryInfo,
		GetReportFileInfosList
	} from "@/api/interface.js";
	export default {
		components: {
			TreeFolder,
		},
		data() {
			return {
				loading: false,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				click: "返回",
				typeTital: 2,
				curNameKey: "/ReportFile",
				// 是否显示子组件的下级目录
				isShowChildren: false,
				//  显示子组件里的向上或者向下箭头
				iconNameChildren: "arrow-up",
				// 报表文件递归组件数据
				treeData: treeData,
				MenuData: [], // 菜单栏的数据（树形结构的数据）
				// 是否列表加载
				loading: false,
				// 是否弹窗
				showPopup: false,
				// 报表下载列表数据
				excelListData: [],
				// 每一个用户下的报表文件数据
				fileDirectoryInfo: [],
				url: "",
			};
		},
		onLoad(options) {
			// 报表目录重置
			this.curNameKey = '/ReportFile'
			this.treeData = []
			let Permissions = this.$store.state.Permissions
			//     获取每一个用户目录下报表文件信息
			if (Permissions.findIndex((item) => item == "User.AllReportFile") !== -1) {
				this.GetReportFileInfosListData();
			}
			// 获取报表目录结构
			this.getFileDirectoryInfo();
			this.excelListData = [];
			// const currentRoute = this.$route.path;
			// if (currentRoute === '/pages/excel/excel') this.curNameKey = '/ReportFile' // 报表目录重置
		},
		// watch:{
		//   $route:{
		//     handler(val,oldval){
		// 		console.log('获取路由--', val, oldval)
		//       // console.log('老路由信息',val, this.curNameKey);//新路由信息
		//       // console.log('新路由信息',oldval,  this.curNameKey);//老路由信息
		//       if(val.path ==="/excel"){
		//         
		//         this.curNameKey = '/ReportFile'
		//       }
		//     },
		//     // 深度观察监听
		//     deep: true
		//   }
		// },
		computed: {
			...mapState(["system"]),
		},
		methods: {
			nClick(item) {
				alert("是否点击了", item);
				// Toast.success('成功')
			},

			openForm(item) {
				this.$emit("editfn", item);
			},
			/**
			 * 点击复选框操作
			 * @param {*} id 父级item的id
			 * @param {*} pid 子集的pid
			 */
			clickBox(id, pid) {
				if (id) {
					// this.activeNames.push(id)
					// this.activeChildrenNames.push(id)
				}
				this.$emit("changebox", id, pid);
			},
			// 返回到上一页
			onClickLeft() {
				this.$router.back();
			},
			// 下载报表点击事件
			excelDownloadChange() {
				// this.$refs.downLoadExcel.showPopup = true;
				this.showPopup = true;
			},

			//   报表列表点击下载
			submitDownButton(url) {
				var that = this
				var that = this;
				this.loading = true
				uni.showLoading({
					title: '下载中...'
				})
				setTimeout(function() {
					that.loading = false
					uni.hideLoading()
				}, 500);

				// 点击按钮下载文件
				window.open(url.FileDownLoadUrl, "_self");
			},

			nodeClick(val) {
				console.log('点击目录结构', val)
				this.curNameKey = val.key;
				// 获取每一个用户下的报表文件列表数据 重新加载下载列表
				this.GetReportFileInfosListData()
				// this.$set(val, "curNameKey", this.curNameKey);
				// // 调用子组件的获取数据方法重新加载数据
				// this.titleNodeClickChange();
			},
			// 子组件的报表目录标题点击事件
			titleNodeClickChange(item) {
				console.log('点击了', item)
				return
				// this.isShowChildren = !this.isShowChildren;
				// if (this.isShowChildren) {
				//   this.iconNameChildren = "arrow-up";
				// } else {
				//   this.iconNameChildren = "arrow-down";
				// }
				// 清空列表数据
				this.excelListData = [];
				// 继续加载
				this.loading = false;
				// 重置化参数
				console.log(
					// this.Permissions.findIndex((item) => item == "User.AllReportFile")
				);
				// &&
				// this.Permissions.findIndex((item) => item == "User.AllReportFile") !==
				// 	-1
				if (
					item == 1
				) {
					this.curNameKey = "/ReportFile";
					// 重新加载 获取报表文件列表
					this.getExcelListData();
					this.typeTital = 2;
				} else if (item == 1) {
					this.curNameKey = "/ReportFile";
					this.excelListData = []; // 停止加载
					this.status = "noMore"
					this.typeTital = 2;
				} else {
					// 获取报表文件列表
					this.getExcelListData();
				}
			},
			//   列表加载
			onLoading() {},
			// 获取每一个用户下的报表文件列表数据
			GetReportFileInfosListData() {
				GetReportFileInfosList({
					curNameKey: this.curNameKey
				}).then((res) => {
					if (res.Success) {
						this.excelListData = res.Data;
						// 停止加载
						this.status = "noMore"
						return;
					} else {
						this.$errorToast(res.Msg);
						this.status = "noMore"
						return;
					}
					// 停止加载
					this.status = "noMore"
				});
			},
			// 获取报表目录结构
			getExcelListData() {
				this.status = "loading"
				GetReportFileInfos({
						curNameKey: this.curNameKey
					})
					.then((res) => {
						if (res.Success) {
							this.excelListData = res.Data;
							// 停止加载
							this.status = "noMore"
							return;
						} else {
							this.$errorToast(res.Msg);
							this.status = "noMore"
							return;
						}
						// 停止加载
						this.status = "noMore"
					});
			},
			// 获取文件目录结构
			getFileDirectoryInfo() {
				GetReportFileDirectoryInfo({
					curNameKey: this.curNameKey
				}).then(res => {
					if (res.Success) {
						this.treeData = res.Data;
						this.isShowChildren = true;
						// 停止加载
						this.status = "noMore"
					} else {
						this.errorToast(res.Msg);
						// 停止加载
						this.status = "noMore"
					}
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		.height {
			height: 200px;
		}

		.excelBox {
			border: 1px dashed #bdbbbb;
			height: 200px;
			overflow: auto;
			padding: 10px;
			margin: 10px;
		}

		/* 覆盖van-button的默认样式 */
		.van-button {
			padding: 0 10px 0 10px !important;
			position: relative;
		}

		.excel {
			.excelItem {
				// box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
				margin: 15px;
				// border-radius: 10px;
				border-bottom: 1px solid #e3e1e1;
				padding-bottom: 10px;

				.login-btn {
					padding: 1rem 1.5rem;

					>button {
						border-radius: 7px;
						font-size: 14px;
					}
				}

				.excelTitle {}

				.excelListItem,
				.excelTitle {
					//   margin-bottom: 8px;
					font-size: 14px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;
				}

				.excelListItem.button {
					// display: flex;
					// justify-content: flex-end;
				}

				.submitDownButton {
					width: 15%;
					padding: 8px 0;
					color: #fff;
					font-size: 10px;
					border: none;
					background-color: #1989fa;
					border-radius: 5px;
					margin-top: 10px;
				}
			}
		}
	}
</style>